<template>
    <div id="app">
        <van-nav-bar title="流水查询" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-tabs animated swipeable style="margin-top: -0.2rem;z-index: 999;border: none" v-model="activeName">
            <van-tab  title="日报表" name="day">
                <van-list
                        class="list"
                        :style="{height: contentHeight}"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <van-cell v-for="item in list" :key="item" >
                        <template>
                            <div style="display: flex;justify-content: space-between">
                            <div>{{item.dat}}</div>
<!--                                <div style="display: flex;justify-content: space-around ">-->
                                    <div >{{item.count}}笔</div>
                                    <div style="width:4rem;">￥{{item.money}}</div>
<!--                                </div>-->
                            </div>
                        </template>
                    </van-cell>
                </van-list>
            </van-tab>
            <van-tab title="周报表" name="week">
                <van-list
                        class="list"
                        :style="{height: contentHeight}"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <van-cell v-for="item in list" :key="item" >
                        <template>
                            <div style="display: flex;justify-content: space-between">
                                <div>{{item.dat}}</div>
                                <!--                                <div style="display: flex;justify-content: space-around ">-->
                                <div style="">{{item.count}}笔</div>
                                <div style=" width: 60px">￥{{item.money}}</div>
                                <!--                                </div>-->
                            </div>
                        </template>
                    </van-cell>
                </van-list>
            </van-tab>
            <van-tab title="月报表" name="month">
                <van-list
                        class="list"
                        :style="{height: contentHeight}"
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad"
                >
                    <van-cell v-for="item in list" :key="item" >
                        <template>
                            <div style="display: flex;justify-content: space-between">
                                <div>{{item.dat}}</div>
                                <!--                                <div style="display: flex;justify-content: space-around ">-->
                                <div style="">{{item.count}}笔</div>
                                <div style=" width: 60px">￥{{item.money}}</div>
                                <!--                                </div>-->
                            </div>
                        </template>
                    </van-cell>
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    export default {
        name: "BusinessDetails",
        data(){
            return{
                activeName:'day',
                list: [],
                loading: false,
                finished: false,
                contentHeight:0,
                page:0,
            }
        },
        mounted() {
            this.contentHeight = document.documentElement.clientHeight - 60 - 20 + "px";

        },
        watch:{
            activeName:function (val) {
                if (val=="day"){
                    this.page=1
                    this.orpect()
                    this.list= []
                }else if (val=="week"){
                    this.page=1
                    this.orpect()
                    this.list= []
                }else if (val=="month"){
                    this.page=1
                    this.orpect()
                    this.list= []
                }
            }

        },
        methods:{
            onLoad() {
                this.page+=1
                this.orpect()
            },
            orpect(){
                this.$api.get('manager.order/transaction?page='+this.page+'&limit='+15+'&type='+this.activeName).then(json=>{
                    this.loading=false;
                    if (json.data.length) {
                        this.list.push(...json.data);
                        this.finished = false;
                    } else{
                        this.finished = true;
                    }
                })
            },
            onClickLeft() {
                this.$router.back();
            },
        }
    }
</script>

<style scoped>
    #app{
        /*border: solid 1px blue;*/
        /*width: 99%;*/
    }
    .list{
        margin-top:0.2rem ;
        overflow: scroll;
    }

</style>